<script setup>
import PageContainer from "@/components/PageContainer.vue";
import {delArticle, queryArticleList} from "@/api/article.js";
import {ref} from "vue";
import {Delete, Edit} from "@element-plus/icons-vue";
import ChannelSelect from "@/components/article/ChannelSelect.vue";
import ArticleEdit from "@/components/article/ArticleEdit.vue";
import {formatDate} from "@/utils/format.js";

// 加载
const loading = ref(false)

// 定义请求参数对象
const params = ref({
	pageNum: 1,
	pageSize: 5,
	cateId: '',
	state: ''
})

// 分页函数
const onCurrentChange = (pageNum) => {
	params.value.pageNum = pageNum
	getArticleList()
}
const onSizeChange = (pageSize) => {
	params.value.pageNum = 1
	params.value.pageSize = pageSize
	getArticleList()
}
const onRest = () => {
	params.value = {
		pageNum: 1,
		pageSize: 5,
		cateId: '',
		state: ''
	}
	getArticleList()
}

// 列表数据
const articleList = ref([])
const total = ref(0)
const getArticleList = async () => {
	loading.value = true
	const res = await queryArticleList(params.value)
	articleList.value = res.data.records
	total.value = res.data.total
	loading.value = false
}
getArticleList()

const articleEditRef = ref()

// 添加
const addArticle = () => {
	articleEditRef.value.open({})
}

// 编辑
const onEditArticle = (row) => {
	articleEditRef.value.open(row)
}

// 删除
const onRemoveArticle = id => {
	ElMessageBox.confirm('确定删除吗？', '温馨提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		delArticle(id)
		ElMessage.success('删除成功')
		getArticleList()
	}).catch()
}

const onSuccess = (type) => {
	if (type === 'add') {
		// 如果是添加，渲染最后一页
		params.value.pageNum = Math.ceil((total.value + 1) / params.value.pageSize)
	}
	getArticleList()
}
</script>

<template>
	<page-container title="文章管理">
		<template #extra>
			<el-button type="primary" @click="addArticle">添加文章</el-button>
		</template>
		<!--表单区域-->
		<el-form inline>
			<el-form-item label="文章分类：">
				<!--vue2中，v-model属于：[:value + @input] -->
				<!--vue3中，v-model属于：[:modeValue + @update:modelValue] -->
				<!--vue3中，v-model可修改：【v-model:cid="params.cateId"】==【:cid + @update:cid】cid是自定义的 -->
				<channel-select style="width: 150px" v-model="params.cateId"></channel-select>
			</el-form-item>
			<el-form-item label="发布状态：">
				<el-select style="width: 150px" v-model="params.state">
					<el-option label="全部" value="all"></el-option>
					<el-option label="已发" value="1"></el-option>
					<el-option label="草稿" value="0"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getArticleList">搜索</el-button>
				<el-button @click="onRest">重置</el-button>
			</el-form-item>
		</el-form>
		<!--表格区域-->
		<el-table :data="articleList" v-loading="loading">
			<el-table-column label="序号" type="index" width="80"></el-table-column>
			<el-table-column label="文章标题" prop="title" width="250">
				<template #default="{row}">
					<el-link type="primary" :underline="false">{{ row.title }}</el-link>
				</template>
			</el-table-column>
			<el-table-column label="文章分类" prop="cateName"></el-table-column>
			<el-table-column label="文章封面" prop="imgUrl">
				<template #default="{row}">
					<img v-if="row.imgUrl" :src="row.imgUrl" alt="" style="width: 100px; height: 50px">
					<span v-else style="text-align: center">无封面</span>
				</template>
			</el-table-column>
			<el-table-column label="发表日期" prop="pubDate" width="250">
				<template #default="{row}">
					{{ formatDate(row.pubDate) }}
				</template>
			</el-table-column>
			<el-table-column label="发布状态" prop="state">
				<template #default="{row}">
					{{ row.state === "1" ? "已发" : "草稿" }}
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<!--row：就是list中的每一项，index就是下标-->
				<template #default="{row}">
					<el-button @click="onEditArticle(row)" :icon="Edit" type="primary" circle/>
					<el-button @click="onRemoveArticle(row.id)" :icon="Delete" type="danger" circle/>
				</template>
			</el-table-column>
		</el-table>
		<!--分页区域-->
		<div style="margin-top: 20px; display: flex; justify-content: center">
			<el-pagination
					v-model:current-page="params.pageNum"
					v-model:page-size="params.pageSize"
					:page-sizes="[3, 5, 8, 10, 20, 50, 100]"
					:small="true"
					:background="true"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					@current-change="onCurrentChange"
					@size-change="onSizeChange"
			/>
		</div>
		<!--抽屉区域-->
		<article-edit ref="articleEditRef" @success="onSuccess"/>
	</page-container>
</template>

<style scoped>

</style>